<template>
    <div class="icon-wrapper">
        <roll>
            <div class="icon-remove_circle_outline" v-show="food.count" @click="decrease"></div>
        </roll>
        <!--<fade>-->
            <div class="count">{{food.count|| ''}}</div>
        <!--</fade>-->
        <div class="icon-add_circle" @click="increase"></div>
    </div>
</template>

<script>
    import Roll from '../transition/roll'
    import Fade from '../transition/fade'
    import Parabola from '../transition/parabola'
    import Reflow from '../transition/reflow'
    export default {
        name: "goodsWanted",
        props:{
            food: Object,
        },
        components:{
            Roll, Fade, Parabola, Reflow
        },
        methods:{
            increase(){
                if(this.food.count=== undefined)
                    this.$set(this.food, 'count', 0)
                this.food.count++
            },
            decrease(){
                if(this.food.count>0)
                    this.food.count--
            }
        },
    }
</script>

<style scoped lang="stylus">
    @import '~common/stylus/variable.styl'
    .icon-wrapper
        color: $color-blue
        position: absolute
        z-index: 1
        right: 8px
        bottom: 2px
        display: flex
        justify-content: flex-end
        font-size: $fontsize-large-xxx
        .count
            font-size: $fontsize-small
            line-height: 24px
            width: 24px
            text-align: center

</style>
